<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>
        blogs
    </title>
    
<link rel="stylesheet" href="/libs/highlight/styles/monokai-sublime.css">

    
<link rel="stylesheet" href="/libs/font-awesome/css/font-awesome.min.css">

    
<link rel="stylesheet" href="/css/style.css">

<meta name="generator" content="Hexo 4.2.0"></head>

<body id="bodyx">
    <div class="hd posts">
    <a href="/index.html"><i class="fa fa-reply replay-btn" aria-hidden="true"></i></a>
    <div class="post-title">
        <p>
            学习ES6语法(4)
        </p>
        <hr>
    </div>
    <div class="post-content">
        <h1 id="四、扩展运算符和rest运算符"><a href="#四、扩展运算符和rest运算符" class="headerlink" title="四、扩展运算符和rest运算符"></a>四、扩展运算符和rest运算符</h1><ul>
<li><p>学习本章节可以很好的为我们解决参数和对象数组未知情况下的编程</p>
</li>
<li><p><strong>对象扩展运算符（…）</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">当传入的参数不确定的时候，可以使用扩展运算符来作为参数</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">test</span>(<span class="params">...arg</span>)</span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(arg[<span class="number">0</span>]);</span><br><span class="line">    <span class="built_in">console</span>.log(arg[<span class="number">1</span>]);</span><br><span class="line">    <span class="built_in">console</span>.log(arg[<span class="number">2</span>]);</span><br><span class="line">    consoel.log(arg[<span class="number">3</span>]);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">test(<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>) <span class="comment">//1,2,3，undefined，这说明是可以传入多个值，并且就算方法中引用多了也不会报错。</span></span><br><span class="line">可以传递多个参数，但是在获取参数的时候用下标来取</span><br></pre></td></tr></table></figure>
</li>
<li><p><strong>扩展运算符的用处</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line">例子说明，我们声明两个数组arr1和arr2，然后我们把arr1赋值给arr2，然后我们改变arr2的值，你会发现arr1的值也改变了，因为我们这是对内存堆栈的引用，而不是真正的赋值</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> arr1 = [<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>,<span class="number">4</span>]</span><br><span class="line"><span class="keyword">let</span> arr2 = arr1;</span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(arr2) <span class="comment">//长度是5 但是没有改变内容 [1, 2, 3, 4]</span></span><br><span class="line">arr2.push(<span class="number">5</span>);</span><br><span class="line"><span class="built_in">console</span>.log(arr1) <span class="comment">//改变的2的参数，其实是也是对1的改变 并未完成真正的赋值 [1, 2, 3, 4, 5]</span></span><br><span class="line"></span><br><span class="line">但是实际上我们并不希望得到这个结果，使用扩展运算符解析</span><br><span class="line"><span class="keyword">let</span> arr1 = [<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>,<span class="number">4</span>]</span><br><span class="line"><span class="keyword">let</span> arr2 = [...arr1]</span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(arr2) <span class="comment">// [1,2,3,4,5]</span></span><br><span class="line">arr2.push(<span class="number">5</span>) <span class="comment">//此时push得数组才是直接对arr2的改变，未对1进行任何操作</span></span><br><span class="line"><span class="built_in">console</span>.log(arr1) <span class="comment">// [1,2,3,4]</span></span><br><span class="line"></span><br><span class="line">你可以看到我们的arr1并没有改变，简单的扩展运算符就解决了这个问题</span><br></pre></td></tr></table></figure>
</li>
<li><p><strong>rest运算符</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line">理解rest运算符并不困难，它们有很多相似之处，甚至很多时候你不用特意去区分。它也用…（三个点）来表示，我们先来看一个例子</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">test</span>(<span class="params">first,...arg</span>)</span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(arg.length) <span class="comment">//7</span></span><br><span class="line">    <span class="built_in">console</span>.log(first)  <span class="comment">// 0 第一个元素</span></span><br><span class="line">&#125;</span><br><span class="line">test(<span class="number">0</span>,<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>,<span class="number">4</span>,<span class="number">5</span>,<span class="number">6</span>,<span class="number">7</span>);</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">test</span>(<span class="params">first,...arg</span>)</span>&#123;</span><br><span class="line">    <span class="keyword">for</span>(<span class="keyword">let</span> val <span class="keyword">of</span> arg)&#123;</span><br><span class="line">        <span class="built_in">console</span>.log(val);</span><br><span class="line">    &#125; </span><br><span class="line">&#125;</span><br><span class="line">test(<span class="number">0</span>,<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>,<span class="number">4</span>,<span class="number">5</span>,<span class="number">6</span>,<span class="number">7</span>);</span><br><span class="line"></span><br><span class="line"><span class="keyword">for</span>…<span class="keyword">of</span>的循环可以避免我们开拓内存空间，增加代码运行效率  </span><br><span class="line"></span><br><span class="line">rest运算符和扩展运算符非常相似，要区分清楚</span><br></pre></td></tr></table></figure>





</li>
</ul>
<h1 id="五、字符串模板"><a href="#五、字符串模板" class="headerlink" title="五、字符串模板"></a>五、字符串模板</h1><ul>
<li><p>ES6对字符串新增的操作，最重要的就是字符串模版，字符串模版的出现让我们再也不用拼接变量了，而且支持在模板中进行简单的计算操作</p>
</li>
<li><p><strong>ES5拼接语法</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> jspang=<span class="string">'技术胖'</span>;</span><br><span class="line"><span class="keyword">let</span> blog = <span class="string">'非常高兴你能看到这篇文章，我是你的老朋友'</span>+jspang+<span class="string">'。这节课我们学习字符串模版。'</span>;</span><br><span class="line"><span class="built_in">document</span>.write(blog)</span><br><span class="line"></span><br><span class="line">ES5下必须用+jspang+这样的形式进行拼接，这样很麻烦而且很容易出错。ES6新增了字符串模版，可以很好的解决这个问题。字符串模版不再使用‘xxx’这样的单引号，而是换成了xxx这种形式，也叫连接号。这时我们再引用jspang变量就需要用$&#123;jspang&#125;这种形式了，我们对上边的代码进行改造</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> jspang=<span class="string">'技术胖'</span>;</span><br><span class="line"><span class="keyword">let</span> blog = <span class="string">`非常高兴你能看到这篇文章，我是你的老朋友<span class="subst">$&#123;jspang&#125;</span>。这节课我们学习字符串模版。`</span>;</span><br><span class="line"><span class="built_in">document</span>.write(blog)</span><br><span class="line"></span><br><span class="line">和上边代码一样的结果。而且这里边支持html标签</span><br><span class="line"><span class="keyword">let</span> jspang=<span class="string">'技术胖'</span>;</span><br><span class="line"><span class="keyword">let</span> blog = <span class="string">`&lt;b&gt;非常高兴你能看到这篇文章&lt;/b&gt;，我是你的老朋友<span class="subst">$&#123;jspang&#125;</span>。&lt;br/&gt;这节课我们学习字符串模版。`</span>;</span><br><span class="line"><span class="built_in">document</span>.write(blog);</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">支持简单运算</span><br><span class="line"><span class="keyword">let</span> a = <span class="number">1</span></span><br><span class="line"><span class="keyword">let</span> b = <span class="number">2</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> c = <span class="string">`<span class="subst">$&#123;a + b&#125;</span>`</span></span><br><span class="line"><span class="built_in">console</span>.log(c);</span><br></pre></td></tr></table></figure>



</li>
</ul>
<ul>
<li><p><strong>字符串查找</strong></p>
<ul>
<li><p><strong>查找是否存在:</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">ES5的写法，其实这种方法并不实用，给我们的索引位置,还需要自己判断</span><br><span class="line"><span class="keyword">let</span> jspang=<span class="string">'技术胖'</span>;</span><br><span class="line"><span class="keyword">let</span> blog = <span class="string">'非常高兴你能看到这篇文章，我是你的老朋友技术胖。这节课我们学习字符串模版。'</span>;</span><br><span class="line"><span class="built_in">document</span>.write(blog.indexOf(jspang));</span><br><span class="line"></span><br><span class="line">ES6直接用includes就可以判断，不再返回索引值</span><br><span class="line"></span><br><span class="line">判断开头是否存在</span><br><span class="line">startsWith()</span><br><span class="line"></span><br><span class="line">判断结尾是否存在：</span><br><span class="line">endsWith()</span><br></pre></td></tr></table></figure>
</li>
<li><p><strong>注意：starts和ends 后边都要加s</strong></p>
</li>
</ul>
</li>
<li><p><strong>复制字符串</strong></p>
</li>
</ul>
  <figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">我们有时候是需要字符串重复的，比如分隔符和特殊符号，这时候复制字符串就派上用场了，语法很简单</span><br><span class="line">document.write(&#39;jspang|&#39;.repeat(3));</span><br></pre></td></tr></table></figure>



<h1 id="六、ES6数字操作"><a href="#六、ES6数字操作" class="headerlink" title="六、ES6数字操作"></a>六、ES6数字操作</h1><ul>
<li><p><strong>二进制和八进制</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">二进制和八进制数字的声明并不是ES6的特性</span><br><span class="line"></span><br><span class="line">二进制声明:</span><br><span class="line">	二进制的英文单词是Binary,二进制的开始是<span class="number">0</span>（零），然后第二个位置是b（注意这里大小写都可以实现），然后跟上二进制的值就可以了</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> binary = <span class="number">0b00101</span></span><br><span class="line"><span class="built_in">console</span>.log(binary) <span class="comment">//5</span></span><br><span class="line"></span><br><span class="line">八进制声明：</span><br><span class="line">    八进制的英文单词是Octal，也是以<span class="number">0</span>（零）开始的，然后第二个位置是O（欧），然后跟上八进制的值就可以了</span><br><span class="line">    </span><br><span class="line"><span class="keyword">let</span> b=<span class="number">0o666</span>;</span><br><span class="line"><span class="built_in">console</span>.log(b); <span class="comment">// 438</span></span><br></pre></td></tr></table></figure>



</li>
</ul>
<ul>
<li><p><strong>数字判断和转换</strong></p>
<ul>
<li><p><strong>数字验证Number.isFinite( xx )</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">可以使用<span class="built_in">Number</span>.isFinite( )来进行数字验证，只要是数字，不论是浮点型还是整形都会返回<span class="literal">true</span>，其他时候会返回<span class="literal">false</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> a= <span class="number">11</span>/<span class="number">4</span>;</span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Number</span>.isFinite(a));<span class="comment">//true</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Number</span>.isFinite(<span class="string">'jspang'</span>));<span class="comment">//false</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Number</span>.isFinite(<span class="literal">NaN</span>));<span class="comment">//false</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Number</span>.isFinite(<span class="literal">undefined</span>));<span class="comment">//false</span></span><br></pre></td></tr></table></figure>



</li>
</ul>
</li>
</ul>
<ul>
<li><p><strong>NaN验证</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line"><span class="literal">NaN</span>是特殊的非数字，可以使用<span class="built_in">Number</span>.isNaN()来进行验证。下边的代码控制台返回了<span class="literal">true</span></span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Number</span>.isNaN(<span class="literal">NaN</span>));</span><br><span class="line"></span><br><span class="line">判断是否为整数<span class="built_in">Number</span>.isInteger(xx)</span><br><span class="line"><span class="keyword">let</span> a=<span class="number">123.1</span>;</span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Number</span>.isInteger(a)); <span class="comment">//false</span></span><br><span class="line"></span><br><span class="line">整数转换<span class="built_in">Number</span>.parseInt(xxx)和浮点型转换<span class="built_in">Number</span>.parseFloat(xxx)</span><br><span class="line"><span class="keyword">let</span> a=<span class="string">'9.18'</span>;</span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Number</span>.parseInt(a)); </span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Number</span>.parseFloat(a));</span><br><span class="line"></span><br><span class="line">整数取值范围操作 </span><br><span class="line">整数的操作是有一个取值范围的，它的取值范围就是<span class="number">2</span>的<span class="number">53</span>次方。我们先用程序来看一下这个数字是什么</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> a = <span class="built_in">Math</span>.pow(<span class="number">2</span>,<span class="number">53</span>)<span class="number">-1</span>;</span><br><span class="line"><span class="built_in">console</span>.log(a); <span class="comment">//9007199254740991</span></span><br><span class="line"></span><br><span class="line">我们计算时会经常超出这个值，所以我们要进行判断，ES6提供了一个常数，叫做最大安全整数，以后就不需要我们计算了</span><br></pre></td></tr></table></figure>
</li>
<li><p><strong>最大安全数</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">consolec .log(<span class="built_in">Number</span>.MAX_SAFE_INTEGER);</span><br></pre></td></tr></table></figure>
</li>
<li><p><strong>最小安全整数</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Number</span>.MIN_SAFE_INTEGER);</span><br></pre></td></tr></table></figure>
</li>
<li><p><strong>安全整数判断isSafeInteger( )</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> a= <span class="built_in">Math</span>.pow(<span class="number">2</span>,<span class="number">53</span>)<span class="number">-1</span>;</span><br><span class="line"><span class="built_in">console</span>.log(<span class="built_in">Number</span>.isSafeInteger(a));<span class="comment">//false</span></span><br></pre></td></tr></table></figure>

</li>
</ul>
<h1 id="七、ES6新增数组知识-1"><a href="#七、ES6新增数组知识-1" class="headerlink" title="七、ES6新增数组知识(1)"></a>七、ES6新增数组知识(1)</h1><ul>
<li><p><strong>JSON数组格式转换</strong></p>
<ul>
<li><strong>Array.from方法</strong></li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span>  json = &#123;</span><br><span class="line">    <span class="string">'0'</span>: <span class="string">'jspang'</span>,</span><br><span class="line">    <span class="string">'1'</span>: <span class="string">'技术胖'</span>,</span><br><span class="line">    <span class="string">'2'</span>: <span class="string">'大胖逼逼叨'</span>,</span><br><span class="line">    length:<span class="number">3</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">这就是一个标准的<span class="built_in">JSON</span>数组格式，跟普通的<span class="built_in">JSON</span>对比是在最后多了一个length属性。只要是这种特殊的json格式都可以轻松使用ES6的语法转变成数组。在ES6中绝大部分的<span class="built_in">Array</span>操作都存在于<span class="built_in">Array</span>对象里。我们就用<span class="built_in">Array</span>.from(xxx)来进行转换。我们把上边的<span class="built_in">JSON</span>代码转换成数组，并打印在控制台</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> arr = <span class="built_in">Array</span>.from(json);</span><br><span class="line"><span class="built_in">console</span>.log(arr);</span><br></pre></td></tr></table></figure>

<ul>
<li><strong>Array.of()方法：</strong></li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">它负责把一堆文本或者变量转换成数组。在开发中我们经常拿到了一个类似数组的字符串，需要使用<span class="built_in">eval</span>来进行转换，如果你一个老手程序员都知道<span class="built_in">eval</span>的效率是很低的，它会拖慢我们的程序。这时候我们就可以使用<span class="built_in">Array</span>.of方法</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> arr =<span class="built_in">Array</span>.of(<span class="number">3</span>,<span class="number">4</span>,<span class="number">5</span>,<span class="number">6</span>);</span><br><span class="line"><span class="built_in">console</span>.log(arr);</span><br><span class="line"></span><br><span class="line">当然它不仅可以转换数字，字符串也是可以转换的</span><br><span class="line"><span class="keyword">let</span> arr =<span class="built_in">Array</span>.of(<span class="string">'技术胖'</span>,<span class="string">'jspang'</span>,<span class="string">'大胖逼逼叨'</span>);</span><br><span class="line"><span class="built_in">console</span>.log(arr);</span><br></pre></td></tr></table></figure>



</li>
</ul>
<ul>
<li><p><strong>find( )实例方法:</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">所谓的实例方法就是并不是以<span class="built_in">Array</span>对象开始的，而是必须有一个已经存在的数组，然后使用的方法，这就是实例方法（不理解请看下边的代码，再和上边的代码进行比对，你会有所顿悟）。这里的find方法是从数组中查找。在find方法中我们需要传入一个匿名函数，函数需要传入三个参数：</span><br><span class="line"></span><br><span class="line">value：表示当前查找的值。</span><br><span class="line">index：表示当前查找的数组索引。</span><br><span class="line">arr：表示当前数组。</span><br><span class="line">在函数中如果找到符合条件的数组元素就进行<span class="keyword">return</span>，并停止查找。你可以拷贝下边的代码进行测试，就会知道find作用。</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> arr=[<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>,<span class="number">4</span>,<span class="number">5</span>,<span class="number">6</span>,<span class="number">7</span>,<span class="number">8</span>,<span class="number">9</span>];</span><br><span class="line"><span class="keyword">let</span> find = arr.find(<span class="function">(<span class="params">value,index,arr</span>) =&gt;</span>&#123;</span><br><span class="line">    <span class="keyword">return</span> value &gt;<span class="number">5</span>;</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(find);   <span class="comment">//控制台输出了6，说明找到了符合条件的值，并进行返回了，如果找不到会显示undefined。</span></span><br></pre></td></tr></table></figure>





</li>
</ul>
<h1 id="八、ES6新增数组知识-2"><a href="#八、ES6新增数组知识-2" class="headerlink" title="八、ES6新增数组知识(2)"></a>八、ES6新增数组知识(2)</h1><ul>
<li><p><strong>fill( )实例方法：</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">fill()也是一个实例方法，它的作用是把数组进行填充，它接收三个参数，第一个参数是填充的变量，第二个是开始填充的位置，第三个是填充到的位置。</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> arr=[<span class="number">0</span>,<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>,<span class="number">4</span>,<span class="number">5</span>,<span class="number">6</span>,<span class="number">7</span>,<span class="number">8</span>,<span class="number">9</span>];</span><br><span class="line">arr.fill(<span class="string">'jspang'</span>,<span class="number">2</span>,<span class="number">5</span>); <span class="comment">// 2后面开始插入 5 结束位置</span></span><br><span class="line"><span class="built_in">console</span>.log(arr);</span><br></pre></td></tr></table></figure>



</li>
</ul>
<ul>
<li><p><strong>数组的遍历</strong></p>
<ul>
<li><p><strong>for…of循环：</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line">ES5的<span class="keyword">for</span>循环要简单而且高效。先来看一个最简单的<span class="keyword">for</span>…<span class="keyword">of</span>循环</span><br><span class="line"><span class="keyword">let</span> arr=[<span class="string">'jspang'</span>,<span class="string">'技术胖'</span>,<span class="string">'大胖逼逼叨'</span>]</span><br><span class="line"></span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">let</span> item <span class="keyword">of</span> arr)&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(item);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">for</span>…<span class="keyword">of</span>数组索引:有时候开发中是需要数组的索引的，那我们可以使用下面的代码输出数组索引</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> arr=[<span class="string">'jspang'</span>,<span class="string">'技术胖'</span>,<span class="string">'大胖逼逼叨'</span>]</span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">let</span> index <span class="keyword">of</span> arr.keys())&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(index);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">同时输出数组的内容和索引：我们用entries()这个实例方法，配合我们的<span class="keyword">for</span>…<span class="keyword">of</span>循环就可以同时输出内容和索引了。</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> arr=[<span class="string">'jspang'</span>,<span class="string">'技术胖'</span>,<span class="string">'大胖逼逼叨'</span>]</span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">let</span> [index,val] <span class="keyword">of</span> arr.entries())&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(index+<span class="string">':'</span>+val);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>



</li>
</ul>
</li>
</ul>
<ul>
<li><p><strong>entries( )实例方法</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">entries()实例方式生成的是Iterator形式的数组，那这种形式的好处就是可以让我们在需要时用next()手动跳转到下一个值。我们来看下面的代码：</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> arr=[<span class="string">'jspang'</span>,<span class="string">'技术胖'</span>,<span class="string">'大胖逼逼叨'</span>]</span><br><span class="line"><span class="keyword">let</span> list=arr.entries();</span><br><span class="line"><span class="built_in">console</span>.log(list.next().value); <span class="comment">// 下标0-&gt;0 内容1-&gt;jspange</span></span><br><span class="line"><span class="built_in">console</span>.log(list.next().value);</span><br><span class="line"><span class="built_in">console</span>.log(list.next().value);</span><br></pre></td></tr></table></figure>



</li>
</ul>

    </div>
    
        <hr class="fhr">
        <div id="vcomments"></div>
    
</div>
    <div class="footer" id="footer">
    <p>Copyright © 2020 <a class="flink" href="https://hexo.io" target="_blank" rel="noopener">Hexo</a>-<a class="flink" href="https://github.com/sanjinhub/hexo-theme-geek" target="_blank" rel="noopener">Geek</a>.
        <label class="el-switch el-switch-green el-switch-sm" style="vertical-align: sub;">
            <input type="checkbox" name="switch" id="update_style">
            <span class="el-switch-style"></span>
        </label>
<!--         <script type="text/javascript">
        var cnzz_protocol = (("https:" == document.location.protocol) ? "https://" : "http://");
        document.write(unescape("%3Cspan id='cnzz_stat_icon_1278548644'%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "v1.cnzz.com/stat.php%3Fid%3D1278548644%26show%3Dpic1' type='text/javascript'%3E%3C/script%3E"));
        </script> -->
    </p>
</div>
<input type="hidden" id="web_style" value="black">
<input type="hidden" id="valine_appid" value="oU6aM6U9xOv4LHEQLo3LLROT-gzGzoHsz">
<input type="hidden" id="valine_appKey" value="TbfimrkuMCSYC9BPMRdOqKga">

<script src="/libs/jquery.min.js"></script>


<script src="/libs/highlight/highlight.pack.js"></script>

<script src='//cdn.jsdelivr.net/npm/valine@1.3.10/dist/Valine.min.js'></script>

<script src="/js/js.js"></script>

<style type="text/css">
.v * {
    color: #698fca;
}

.v .vlist .vcard .vhead .vsys {
    color: #3a3e4a;
}

.v .vlist .vcard .vh .vmeta .vat {
    color: #638fd5;
}

.v .vlist .vcard .vhead .vnick {
    color: #6ba1ff;
}

.v a {
    color: #8696b1;
}

.v .vlist .vcard .vhead .vnick:hover {
    color: #669bfc;
}
</style>
</body>

</html>